<template>
  <div style="width: 100%;height: 100%;">
    <video ref="bankVideo" loop class="bank_video" src="../assets/video_marketing_01.mp4" preload="auto" width="100%" height="100%" ></video>
    <div class="swiper mySwiper" style="overflow: hidden">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background: transparent;z-index: 9;" @click="queryMap()"></div>
        <div class="swiper-slide" @click="queryMap()"><img src="../assets/bank_ceb_poster_01.jpg" style="width: 100%"></div>
        <div class="swiper-slide" @click="queryMap()"><img src="../assets/bank_ceb_poster_02.jpg" style="width: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/css/swiper.min.css'
export default {
  name: 'HelloWorld',
  data () {
    return {
      indexSwiperListLength: 3
    }
  },
  mounted(){
    this.swiperConfig();
  },
  methods:{
    swiperConfig(){
      let that = this;
      var swiper = new Swiper(".mySwiper", {
        autoplay: {
          delay: 11000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true,
        on: {
          slideChangeTransitionEnd: function(){
            const realIndex = (this.activeIndex - 1 + that.indexSwiperListLength) % (that.indexSwiperListLength);
            if(realIndex == 0){
              that.$refs.bankVideo.play();//播放
            }else{
              that.$refs.bankVideo.pause();//暂停
            }
          },
        },
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    line-height: .9;
  }
  .swiper-slide img {
    width: 100%;
  }
  .bank_video{
    width:100%;
    -o-object-fit:fill;
    object-fit:fill;
    background:#000;
    position:absolute;
    top:0;
    left:0;
    z-index:1
  }
  .swiper-wrapper::-webkit-scrollbar{
    display: none!important;
  }
</style>
